// import { Layout } from "antd";
import { useEffect } from "react";
import { Navigate, Route, Routes, useNavigate } from "react-router-dom";

import LeftNav from "../../components/left-bav";
import Myheader from "../../components/header";
import memory from "../../utils/memoryUtils";
import Home from "../Home";
import Category from "../Category";
import Product from "../Product";
import Role from "../Role";
import User from "../User";
import Bar from "../Charts/bar";
import Line from "../Charts/line";
import Pie from "../Charts/pie";

// import { Bar, Line, Pie } from "../Charts";
// import storage from "../../utils/storageUtils";
import "./index.less";
// antd中的布局组件使用

import { Layout } from "antd";
const { Header, Content, Footer, Sider } = Layout;

// 后台路由管理组件
const Admin: React.FC = (): void | any => {
  // useNavigate()用于页面跳转
  let history = useNavigate();
  const id = memory.user._id;

  // const del = () => {
  //   // del函数清除localStorage中的用户信息
  //   storage.deleteUser();
  // };

  // 在useEffect监测id的变化,这里的id是用户的后台的id信息,如果刷新页面的则内存中的数据就变了
  // 这里memory.user的信息是来自登录之后写入到localstorage中的,有长时间效,现在刷新页面不会掉线触发跳转到login了
  // localstorage中的数据有长时效性,关掉浏览器和重启电脑都不影响,只有手动删除localstorage才可以清除
  useEffect(() => {
    //监听localstorage中信息变化 localStorage的信息被清除的时候就跳转到login界面
    if (!id) {
      console.log("now=", id);
      history("/login", { replace: true });
    }
    // 监测id变化的时候才会执行useEffect的内容
    // 在使用useEffect时，当我们将函数的声明放在useEffect函数外面时会报eslint警告
    // 这里就是指的是history在useEffect外声明,这里忽略eslint报错即可
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  // const [collapse, setcollapse] = useState(false);

  // const onCollapse = (collapsed: any) => {
  //   console.log(collapsed);
  //   setcollapse(collapsed);
  // };

  // 如果得到的id是默认填充说明没有从数据库拿到有效信息,所以跳转回login

  // 用户登录之后的提示信息
  // 在tsx中不能直接在{}中写一整个对象,需要解析对象所有内容出来才行

  // Hello!~ {id} <button onClick={del}>删除UserInfo</button> */

  return (
    <Layout className="layout-container">
      <Sider>
        <LeftNav />
      </Sider>
      <Layout>
        <Header className="header-container">
          <Myheader />
        </Header>
        <Content className="content">
          {/* 在Content中配置二级路由只需要写admin下的路由就可以了 */}
          {/* /admin的路由已经在admin组件所在的app组件中写过了 这里只需要写属于自己的那部分即可 */}
          <Routes>
            <Route path="/home" element={<Home />}></Route>
            <Route path="/category" element={<Category />}></Route>
            {/* 因为/product路由下面还要再添加其他的路由,所以要写成path="/product/*" 否则可能不能再渲染出子组件 */}
            <Route path="/product/*" element={<Product />}></Route>
            <Route path="/role" element={<Role />}></Route>
            <Route path="/user" element={<User />}></Route>
            <Route path="/charts/bar" element={<Bar />}></Route>
            <Route path="/charts/line" element={<Line />}></Route>
            <Route path="/charts/pie" element={<Pie />}></Route>

            {/* react-router-dom中移除了redirect方法  现在用下面的这种方法来实现以前的redirect */}
            <Route path="*" element={<Navigate to="/admin/home" />} />
          </Routes>
        </Content>
        <Footer className="footer-container">
          建议使用Chrome浏览器 - Made by ShenZY98
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Admin;
